<template>
	<om-page :title="pageTitle">
		<view v-if="formulaData.userName">
			<view  class="salary-formular-user flex padding-left padding-top">
				<image class="salary-formular-user-head" :src="'/'+om.getAvatar()" mode="aspectFit">
				<view class="margin-left om-font-size salary-formular-user-name">
					{{formulaData.userName}}
				</view>
			</view>
			<view v-if="formulaData.itemName" class="tui-flex padding om-font-size border-buttom" >
				<view  class="tui-col-4 ">薪资项名称</view>
				<view class="tui-col-8 text-grey">{{formulaData.itemName}}</view>
			</view>
			<view v-if="formulaData.statisticsSection" class="tui-flex padding om-font-size border-buttom" >
				<view  class="tui-col-4 ">统计区间</view>
				<view class="tui-col-8 text-grey">{{formulaData.statisticsSection}}</view>
			</view>
			<view v-if="formulaData.itemMap">
				<view class="tui-flex padding om-font-size " >
					<view  class="tui-col-4 ">项目代码</view>
				</view>
				<uni-list>
					<view v-for="(value,name) in formulaData.itemMap" :key="name">
						<uni-list-item :showHover="false" :showArrow="false">
							<view class="tui-flex align-center">
								<view class="tui-col-4 text-right padding-right ">
									{{value.code}}
								</view>
								<view class="tui-col-8 text-grey">
									{{value.name.replace("[", "").replace("]", "") + "(" + value.value + ")"}}
								</view>
							</view>
						</uni-list-item>
					</view>
				</uni-list>
			</view>
			<view v-if="formulaData.formula" class="tui-flex padding om-font-size border-buttom salary-formular-f" >
				<view  class="tui-col-4 ">计算公式</view>
				<view class="tui-col-8 text-grey " v-html="formulaData.formula"></view>
			</view>
			<view v-if="formulaData.valueFormula" class="tui-flex padding om-font-size border-buttom" >
				<view class="tui-col-4 ">计算值</view>
				<view class="tui-col-8 text-grey">{{calcFormula(formulaData.valueFormula)}}</view>
			</view>
		</view>
	</om-page>
</template>

<script>
	export default {
		data() {
			return {
				query:{
					salaryColumnId:null,
					salaryRollSubId:null,
					salaryRollId:null
				},
				formulaData:{}
			}
		},
		methods: {
			initData(){
				let method = ""
				if(this.query.salaryRollId){
					method = "getItemFormularDisplay2"
				}else if(this.query.salaryRollSubId){
					method = "getItemFormularDisplay"
				}
				this.om.request("salaryConfig/" + method,this.query).then(res=>{
					if(res.succeed){
						this.formulaData = res.value
					}
				})
			},
			calcFormula(formula){
				let v = eval(formula).toFixed(2);
				return v + " = " + formula;
			}
		},
		onLoad(options) {
			this.pageTitle = options.title || "公式详情"
			uni.setNavigationBarTitle({
				title: this.pageTitle
			})
			let _that = this
			if (options.columnId) {
				_that.query.salaryColumnId = options.columnId
				if(options.posId){
					_that.query.posId = options.posId
				}
				if (options.customId) {
					let arr = options.customId.split("_");
					if(arr.length == 1){
						_that.query.salaryRollId = arr[0];
					}else {
						_that.query.salaryRollSubId = arr[1];
					}
					_that.initData();
				} 
			} 
		}
	}
</script>

<style>
.salary-formular-user-head{
		height: 40px;
		width:40px;
	}
	.salary-formular-user{
		display: flex;
		justify-content: flex-start;
		height: 70px;
		border-bottom: 3px solid #EEEEEE;
		background-color: white;
		position: -webkit-sticky;
		 position: sticky;
		 top: var(--window-top);
		 z-index: 99;
	}
	.salary-formular-user-name{
		line-height: 40px;
	}
	.border-buttom{
		border-bottom: 1px solid #EEEEEE;
	}
	.salary-formular-f .formulaTable {
		border: 2px solid red;
	}
</style>
